<template>
  <div class="menu" >
      <div class="menubox">
        <h2 class="menu_title" >{{title}}</h2>
        <div class="menu_list" >
           <div class="menu_item" v-for="item of menulist" :key="item.icon" >
            <router-link :to="item.path" custom v-slot="{ navigate, isActive }" >
                <div @click="navigate"  :class="isActive ? 'active menu-item-info' : 'menu-item-info'">
                    <div class="menu-item-box" @click="handerItem(item.path,isActive)">
                        <span><i :class="'iconfont ' + item.icon "></i> <span class='menu_item_nav'>{{item.name}}</span></span>
                        <span class="message-text" v-if=" item.path== '/news/comment' && comMessage!=0 &&!isActive "> {{comMessage}}</span>
                        <span class="message-text" v-if="item.path=='/news/fabulous' && fabMessage!=0 &&!isActive "> {{fabMessage}}</span>
                    </div>

                </div>
            </router-link>
            </div>

        </div>

      </div>

    </div>
</template>

<script>
import http from '@/util/http'
import { mapState, mapMutations } from 'vuex'
export default {

  data () {
    return {
      scrollY: null,
      fabMessage: 0, // 点赞的数量
      comMessage: 0
    }
  },
  props: {
    title: String,
    menulist: Array
  },
  computed: {
    ...mapState(['user', 'articleFabNum', 'articleComNum'])

  },
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
        try {
          if (val.fullPath == '/news/comment') { // 切换到评论页面
            this.comMessage = 0
            console.log('进入了评论页面-------------------')
          } else if (val.fullPath == '/news/fabulous') { // 切换到点赞页面
            // 获取评论未读
            this.fabMessage = 0
            console.log('进入了点赞页面-------------------')
          }
        } catch (error) {

        }
      },
      // 深度观察监听
      deep: true
    }
  },
  mounted () {
    http.getFabUnread(this.user.uid).then(res => {
      this.comMessage = res.data.unread_count_com
    })
    http.getcommentUnread(this.user.uid).then(res => {
      this.fabMessage = res.data.unread_count_fab
    })
  },
  methods: {
    ...mapMutations(['updateFabNum', 'updateComNum']),
    handerItem (path, bolen) {
      console.log(path, bolen)
      if (path == '/news/fabulous' && !bolen) {
        // 3.获取评论页面的未读数据
        // 获取评论未读
        http.getFabUnread(this.user.uid).then(res => {
          this.comMessage = res.data.unread_count_com
        })
      } else if (path == '/news/comment' && !bolen) {
        // 3.获取点赞页面的未读数据
        // 获取点赞的未读数量
        http.getcommentUnread(this.user.uid).then(res => {
          this.fabMessage = res.data.unread_count_fab
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped>
// 引入基础配置
@use "@/styles/init" as h;
.menu{
    z-index: 999;
    width: 180px;
    min-height: 132px;
    height: 92vh ;
    border-radius: h.$border-radius5;
    position: sticky;
    top: 54px;
    background: h.$color;
    margin-right: 10px;
    .menubox{
        padding: 0 5px;
        .menu_title{
            width: 80%;
            margin: 10px auto;
            padding: 0 10%;
            font-weight: normal;
            font-size: 22px;
            font-family: h.$font-family;
            color: h.$title-one-color;
        }
        .menu_list{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .menu_item{
                width: 100%;
                display: inline-block;
                padding: 8px 10%;
                cursor: pointer;
                &:hover{
                    background: h.$background-color;
                }
                .menu-item-info{
                    color: h.$title-two-color;
                    width: 100%;
                    display: inline-block;
                    font-size: 14px;
                    font-family: h.$font-family;
                    .menu-item-box{
                        width: 100%;
                         position: relative;
                           display: flex;
                        justify-content: space-between;
                    }
                    .message-text{
                        min-width: 17px;
                        font-size: 12px;
                        height: 14px;
                        margin: 3px 0;
                        text-align: center;
                        transform: scale(0.833) !important;
                        color: #fff;
                        background: #ff2026;
                        border-radius: 10px;
                        padding: 3px;
                        font-weight: 700;
                    }
                    .iconfont{
                        font-size: 24px;
                    }
                    .menu_item_nav{
                        margin-left: 10%;

                        display: inline-block;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .active{
                    color: h.$main-color;
                }
            }

        }

    }

}
@media screen and (max-width:856px) {
.menu{
    z-index: 999;
    width: 132px;
    min-height: 132px;
    height: 92vh ;
    border-radius: h.$border-radius5;
    position: sticky;
    top: 54px;
    background: h.$color;
    .menubox{
        padding: 0 5px;
        .menu_title{
            width: 80%;
            margin: 10px auto;
            padding: 0 10%;
            font-weight: normal;
            font-size: 22px;
            font-family: h.$font-family;
            color: h.$title-one-color;
        }
        .menu_list{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .menu_item{
                width: 100%;
                display: inline-block;
                padding: 8px 10%;
                cursor: pointer;
                &:hover{
                    background: h.$background-color;
                }
                .menu-item-info{
                    color: h.$title-two-color;
                    width: 100%;
                    display: inline-block;
                    font-size: 14px;
                    font-family: h.$font-family;
                     .menu-item-box{
                        width: 100%;
                         position: relative;
                    }
                    position: relative;
                    .iconfont{
                        font-size: 24px;
                    }
                    .menu_item_nav{
                        margin-left: 10%;

                        display: inline-block;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .active{
                    color: h.$main-color;
                }
            }

        }

    }

}
}
</style>
